<template>
  <component :is="mapComponent" class="map-component"></component>
</template>

<script setup>
import mapComponent from "@/components/mapbox/main/index.vue";
import { onMounted, ref } from "vue";
import { boundaryLine, getMap,  } from "@/components/mapbox/main/index"
import market from "@/assets/json/100000_full.json";

const processJsonData = (data) => {
  if (!data || !data.features || !Array.isArray(data.features)) {
    console.error('数据格式不正确，缺少features数组');
    return data;
  }

  data.features.forEach(feature => {
    if (!feature.properties) {
      feature.properties = {};
    }

    if (!feature.properties.centroid && feature.geometry &&
      feature.geometry.coordinates && Array.isArray(feature.geometry.coordinates)) {

      if (feature.geometry.type === 'Polygon' && feature.geometry.coordinates[0]) {
        feature.properties.centroid = feature.geometry.coordinates[0][0];
      } else if (feature.geometry.type === 'MultiPolygon' && feature.geometry.coordinates[0] &&
        feature.geometry.coordinates[0][0]) {
        feature.properties.centroid = feature.geometry.coordinates[0][0][0];
      }
    }

    if (!feature.properties.name && feature.properties.NAME) {
      feature.properties.name = feature.properties.NAME;
    } else if (!feature.properties.name) {
      feature.properties.name = "未知";
    }
  });
  
  return data;
};


onMounted(() => {
  setTimeout(() => {
    try {
      const map = getMap();
      if (!map) {
        console.error('地图未初始化');
        return;
      }
      
      boundaryLine(map, 'market', processJsonData(market));      
      
    } catch (error) {
      console.error('加载边界时出错:', error);
    }
  }, 500);
});
</script>

<style lang="scss" scoped>
.map-component {
  width: 100%;
  height: 100%;
}
</style>
